<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WebPack-Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link href="../../node_modules/animate.css/animate.css"> -->
    <style>
    [v-cloak]{
        display: none;
    }
    .animate-cicle{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #F44336;
    }
    /* .hxblog-enter,
    .hxblog-leave-to{
        opacity: 0;
        transform:translateX(80px)
    } */
    /* .hxblog-enter-active,
    .hxblog-leave-active{ */
        /* transition: all 0.5s ease; */
        /* animation: bounce-in .8s reverse;
    } */
    /* @keyframes bounce-in{
        0%{
            transform: rotate(0)
        }
        50%{
            transform: rotate(10deg)
        }
        100%{
            transform: rotate(90deg)
        }
    } */
.list-enter-active, .list-leave-active {
  transition: all 0.6s ease;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(80px);
}
    </style>
</head>
<body>
    <div id="app">
        <!-- <button @click='show=!show'>加入购物车</button> -->
        <!-- <transition name='hxblog'>
            <p v-if='show' v-cloak>这是一个动画文本</p>
        </transition> -->

        <!-- <transition
            enter-active-class='animated rollIn'
            leave-active-class='animated rollOut'
        >
            <p v-if='show' v-cloak>这是一个动画文本</p>
        </transition> -->
        <!-- <transition
            @before-enter='beforeEnter',
            @enter='enter',
            @after-enter='afterEnter'
            
        >
            <div class="animate-cicle"  v-if='show'></div>
        </transition> -->

        <!-- <input type="radio" name="view" value="v-a" v-model='view' checked>A
        <input type="radio" name="view" value="v-b" v-model='view'>B
        <transition name='component-fade' mode='out-in'>
            <component :is="view"></component>
        </transition> -->
        id:<input type="text" name="id" v-model='id'>name:<input type="text" name="id" v-model='name'>
        <button type="button" @click='add' class="btn btn-primary">添加</button>
        <table class="table table-sm table-bordered table-hover " style="width:500px;">
            <thead class="thead-light">
                <tr>
                    <th>主键</th>
                    <th>名称</th>
                </tr>
            </thead>
           <tbody name='list' is='transition-group' tag='tbody'>
                <tr v-for='item in dataList' :key="item.id" >
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
           </tbody>
        </table>
        <!-- <transition-group name='list'>
            <li v-for='item in dataList' :key='item.id'>
                {{item.id}}----{{item.name}}
            </li>
        </transition-group> -->
    </div>
</body>
</html>